<template>
    <div>
        <h2>五、vue-router@4 新特性</h2>
        <div>
            <h3>1. 配置相关</h3>
            <p>1.1 Vue Router 不再是一个类：const router = new Router()，而是一个函数：const router = createRouter({})</p>
            <dl>
                <dt>1.2 history 配置取代 mode 配置</dt>
                <dd>（1） mode: 'history' => history: createWebHistory()</dd>
                <dd>（2） base 配置被作为 createWebHistory (其他 history 也一样)的第一个参数传递</dd>
            </dl>
            <p>1.3 routes 属性现在是必需的</p>
            <p>1.4 删除了 *（星标或通配符）路由，须使用自定义的 regex 参数来定义所有路由：{ path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound }</p>
            <p>1.5 scrollBehavior 的变化：x 改名为 left，y 改名为 top</p>
        </div>

        <div>
            <h3>2. 组合式 API -- 在 setup() 中访问路由</h3>
            <p>
                2.1 使用 useRouter() 访问当前路由：
                <button @click="goBack">返回首页</button>
            </p>
            <p>2.2 使用 useRoute() 访问路由</p>
            <p>2.3 组件内的导航守卫：onBeforeRouteLeave(), onBeforeRouteUpdate()</p>
            <p>2.1 通过 useLink() 获取RouterLink的内部行为</p>
        </div>

        <div>
            <h3>3. 路由实例（router）相关</h3>
            <p>3.1 router.onReady() 函数已被 router.isReady() 取代</p>
            <p>3.2 router.match 和 router.resolve 已合并到 router.resolve</p>
        </div>

        <div>
            <h3>4. 当前路由实例（route）相关</h3>
            <p>4.1 删除 parent 属性</p>
        </div>

        <div>
            <h3>5. &lt;router-link&gt; 相关</h3>
            <p>5.1 删除 event, tag 属性：使用 v-slot API 来完全定制</p>
        </div>

        <div>
            <h3>6. &lt;router-view&gt; 相关</h3>
            <p>6.1 &lt;transition&gt; 和 &lt;keep-alive&gt; 必须在 &lt;router-view&gt; 内部使用</p>
            <p>6.2 将内容传递给路由组件的&lt;slot&gt;：必须使用 v-slot API 将其传递给&lt;component&gt;</p>
        </div>

        <div>
            <h3>7. 其它</h3>
            <p>7.1 忽略 mixins 中的导航守卫</p>
            <p>7.2 所有的导航现在都是异步的，包括首屏</p>
        </div>
    </div>
</template>

<script>
import { onMounted } from '@vue/runtime-core'
import { useRouter, useRoute } from 'vue-router'

export default {
    setup() {
        const router = useRouter()
        const route = useRoute()

        const goBack = () => {
            router.push({
                path: '/'
            })
        }

        onMounted(() => {
            console.log('router', router)
            console.log('route', route)
        })

        return {
            goBack
        }
    }

}
</script>

<style lang="scss" scoped>
dl {
    line-height: 40px;
}
</style>
